<template>
  <div>
    <a-progress :percent="30" />
    <!-- <a-model @mousedown="onMouseDown"></a-model> -->
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    onMouseDown(e) {
      // e.preventDefault();
      //记录初始移动的鼠标位置
      let startPosX = e.clientX;
      let startPosY = e.clientY;
      const { styleLeft, styleTop } = this.state; //添加鼠标移动事件
      document.body.onmousemove = (e) => {
        let left = e.clientX - startPosX + styleLeft;
        let top = e.clientY - startPosY + styleTop;
        if (this.inWindow(e.clientX, e.clientY, startPosX, startPosY)) {
          this.setState({
            styleLeft: left,
            styleTop: top,
          });
        }
      }; //鼠标放开时去掉移动事件
      document.body.onmouseup = function () {
        document.body.onmousemove = null;
      };
    },

    inWindow(left, top, startPosX, startPosY) {
      let H = document.body.clientHeight;
      let W = document.body.clientWidth;
      if (
        (left < 20 && startPosX > left) ||
        (left > W - 20 && startPosX < left) ||
        (top < 20 && startPosY > top) ||
        (top > H - 20 && startPosY < top)
      ) {
        document.body.onmousemove = null;
        document.body.onmouseup = null;
      }
    },
  },
};
</script>